<template>
  <el-group-title :title="groupTitle">
    <template slot="groupTitle">
      <el-form :model="detail" :label-width="labelWidth" class="ccui-form">
        <el-col
          v-for="item in formList"
          :key="item.label"
          :span="item.span || 12"
        >
          <el-form-item :label="`${item.label}：`">
            <div v-if="item.isRate" class="rate-item">
              <el-rate v-model="detail[item.titleContent]" disabled />
            </div>
            <div
              v-else
              :title="item.title ? detail[item.titleContent] : ''"
              :class="[
                'ellipsis-3',
                {
                  'success-row':
                    highlightArr.length &&
                    highlightArr.includes(item.titleContent)
                }
              ]"
            >
              {{ detail[item.titleContent] }}
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </template>
  </el-group-title>
</template>

<script>
export default {
  name: "detailBaseInfo",
  props: {
    groupTitle: {
      type: String,
      default: ""
    },
    detail: {
      type: Object,
      default: () => {}
    },
    labelWidth: {
      type: String,
      default: "120px"
    },
    formList: {
      type: Array,
      default: () => []
    },
    highlightArr: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-form-item {
  .rate-item {
    padding-top: 7px;
  }
}
</style>
